import React, { Component, createRef } from 'react'
import BetterScroll from 'better-scroll'
import bsStyle from './style.module.css'
class MyScroll extends Component {
  constructor(props) {
    super(props)
    this.myRef = createRef()
  }

  componentDidMount() {
    this.bs = new BetterScroll(this.myRef.current, {
      pullDownRefresh: {
        threshold: 50,
        stop: 20,
      },
      pullUpLoad: {
        threshold: 50,
      },
    })

    this.bs.on('pullingDown', () => {
      console.log('down')
      setTimeout(() => {
        this.bs.finishPullDown()
      }, 3000)
    })
    this.bs.on('pullingUp', () => {
      console.log('up')
      setTimeout(() => {
        this.bs.finishPullUp()
      }, 3000)
    })
  }
  componentWillUnmount() {
    this.bs = null
    console.log(this.bs, '--')
  }
  render() {
    return (
      <div ref={this.myRef} className={bsStyle['bs-wrapper']}>
        <div className={bsStyle['bs-content']}>{this.props.children}</div>
      </div>
    )
  }
}

export default MyScroll
